<template>
  <div class="home-leftcenter-bottom-wrapper">
    <comp-title v-if="dataSet.rightCenterBottom" :text="dataSet.rightCenterBottom.title" ref="compTitle"></comp-title>
    <custom-legend v-model="legens"
        ref="customLegend"
        class="hone-custom-legend"></custom-legend>
		<div class="home-lc-chart" ref="chartBox">
			<pieChart ref="pieChart" :data="dataSet.rightCenterBottom ? dataSet.rightCenterBottom.data : []" :colors="colors" class="lc-pie-chart"></pieChart>
      <chartTitle ref="chartTitle" class="lc-chart-title" :data="dataSet.rightCenterBottom ? dataSet.rightCenterBottom.titleValue : ''"></chartTitle>
		</div>
		<img src="../../../assets/imgs/left/bottomBg.png" class="bt-bg" ref="btBg">
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CompTitle from '@/components/common/compTitle.vue'
import CustomLegend from '@/components/common/customLegend1.vue'

import pieChart from '@/components/common/pieChart'
import chartTitle from './chartTitle'
export default {
  components: { CompTitle, pieChart,chartTitle, CustomLegend },
  data() {
    return {
      colors: ['#005cf0', '#28a1ff', '#c2fdf4','#00f7fa'],
      legens: [
        {
          name: '数据库',
          color: '#005cf0'
        },
        {
          name: 'vpn',
          color: '#28a1ff'
        },
        {
          name: '前置机',
          color: '#c2fdf4'
        },
        {
          name: '堡垒机',
          color: '#00f7fa'
        }
      ]  
    }
  },
  created() {
	},
  mounted() {},
  computed: {
		...mapState(['dataSet'])
	},
  watch: {},
  methods: {
		
		init() {
			let tl = new TimelineMax({})
			let chartBox = TweenMax.from(this.$refs.chartBox, .3, {opacity: 0})
			let btBg = TweenMax.from(this.$refs.btBg, .3, {opacity: 0})
      tl.addLabel('start')
        .add(this.$refs.compTitle.init(), 'start+=0')
        .add(chartBox,'start+=0.7')
        .add(this.$refs.chartTitle.init(),'start+=0.8')
				.add(this.$refs.pieChart.init, 'start+=1')
        .add(btBg,'start+=1.1')
        .add(this.$refs.customLegend.init(), 'start+=0.8')
          
      return tl
		}
	}
}
</script>
<style lang='scss' scoped>
	.home-leftcenter-bottom-wrapper {
		.home-lc-chart {
			width: 420px;
			height: 230px;
      top: 20px;
      position: relative;
			// border: 1px solid #f00;
      .lc-chart-title {
        position: absolute;
        top: 115px;
        left: 160px;
      }
		}
		
	}
  .hone-custom-legend {
    position: absolute;
    top: 30px;
    left: 0;

    width: 100%;
  }
</style>